<style lang="scss" scoped>
::v-deep .el-collapse-item__content{
  padding: 1rem;
  max-height: calc(100vh - 245px);
  overflow-y: scroll;
}
::v-deep .el-collapse-item__header{
  padding-left: 2rem;
}
</style>

<template>
  <div class="  flex flex-col h-full">
    <el-collapse 
      class=" w-full"
      v-model="activeName" accordion>
      <el-collapse-item name="1" title="通行车辆分析">
        <template v-if="activeName==1">
        <div class=" flex">
          <count-to
            class=" flex-1 text-right bg-blue-50 px-2 shadow-inner rounded font-bold text-yellow-400 text-4xl"
            :endVal="allcar" 
            :duration="1000"
          />
          <span class=" self-end ml-2">辆次</span>
        </div>
        <template
          v-for="(item,index) in car"
          :key="'ci'+index"
        >
          <p>{{item.name}}:</p>
          <div class=" flex">
            <el-progress
              class=" w-0 flex-1"
              :text-inside="true"
              :stroke-width="20"
              :percentage="((item.value || 0)/allcar * 100).toFixed(2)"
              :status="['primary','success','warning'][index]"
            />
            <el-tag class=" w-24 ml-auto">{{item.value}}（辆）</el-tag>
          </div>
        </template>
        <Echart
          class=" w-full h-64"
          :loading="!chartData1"
          :option="chartData1 || {}"
        />
        </template>
      </el-collapse-item>
      <el-collapse-item name="2" title="检查人员分析">
        <template v-if="activeName==2">
        <div class=" flex">
          <count-to
            class=" flex-1 text-right bg-blue-50 px-2 shadow-inner rounded font-bold text-yellow-400 text-4xl"
            :endVal="allpeople" 
            :duration="1000"
          />
          <span class=" self-end ml-2">辆次</span>
        </div>
        <div class="  my-2">
          <p class=" font-bold">
            <span>中标人员：</span>
            <span class=" text-2xl ml-2 text-red-400">{{allpeople_zb}}</span>
          </p>
          <p class=" font-bold">
            <span>正常人员：</span>
            <span class=" text-2xl ml-2 text-blue-400">{{people.zc}}</span>
          </p>
        </div>
        <Echart
          class=" w-full h-64"
          :loading="!chartData2"
          :option="chartData2 || {}"
        />
        <div class=" grid grid-cols-3 gap-2">
          <div
            v-for="(item,index) in people.zb"
            :key="'zb-'+index"
            class=" py-1 text-lg bg-red-200 px-4 rounded"
          >
            <p class="font-bold">{{item.name}}:</p>
            <p>{{item.value}}</p>  
          </div>
        </div>
        </template>
      </el-collapse-item>

      <el-collapse-item name="3" title="重点人员预警">
        <template v-if="activeName==3">
        <template v-if="warning_peoples && warning_peoples.length">
          <div
            v-for="item in warning_peoples"
            :key="'peo-'+item.id"
            class=" flex items-center bg-red-100 py-2 px-3 my-2 "
          >
            <el-avatar
              shape="square" class=" mr-3" :size="60" :src="peopleIcon" />
            <div class=" text-xs">
              <p class=" font-bold">{{item.name}}</p>
              <p>{{item.card}}</p>
              <p>{{item.path}}</p>
              <p>{{item.time}}</p>
            </div>
          </div>
        </template>
        <el-empty v-else description="暂无需关注的重点人员" />
        </template>
      </el-collapse-item>
      
      <el-collapse-item name="4" title="重点车辆预警预警">
        <template v-if="activeName==4">
        <template v-if="warning_cars && warning_cars.length">
          <div
            v-for="item in warning_cars"
            :key="'peo-'+item.id"
            class=" flex items-center bg-red-100 py-2 px-3 my-2 "
          >
            <el-avatar
              shape="square" class=" mr-3" :size="60" :src="carIcon" />
            <div class=" text-xs">
              <p class=" font-bold">{{item.name}}</p>
              <p>{{item.path}}</p>
              <p>{{item.time}}</p>
            </div>
          </div>
        </template>
        <el-empty v-else description="暂无需关注的重点人员" />
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup >
import { computed, h, onBeforeMount, onUnmounted, reactive, toRefs } from 'vue'
import { CountTo } from 'vue3-count-to'
import { getHomeData,getWarning } from 'api'
import { createComponent } from 'echarts-for-vue';
import * as echarts from 'echarts'
import makepiedata from './makepiedata'
import peopleIcon from 'svgs/people.svg'
import carIcon from 'svgs/car.svg'

const Echart = createComponent({echarts,h})

const data = reactive({
  car:{},
  people:{},
  activeCarTab:0,
  allcar:0,
  allpeople:0,
  chartData:false,
  chartData1:{},
  chartData2:{},
  allpeople_zb:0,
  activeName:'1',
  warning_peoples:[],
  warning_cars:[]
})

onBeforeMount(async ()=>{
  const { car,people } = await getHomeData()
  const allcar = car.map(({value})=>value).reduce((a,b)=>a+b)
  const allpeople_zb = people.zb.map(({value})=>value).reduce((a,b)=>a+b)
  const allpeople = people.zc + allpeople_zb
  Object.assign(data,{ car,people,allcar,allpeople,allpeople_zb })
  const chartData1 = makepiedata('通过车辆',car)
  const chartData2 = makepiedata('中标人员',people.zb)
  Object.assign(data,{chartData1,chartData2})
  const { warning_peoples,warning_cars } = await getWarning()
  Object.assign(data,{warning_peoples,warning_cars})
})

const { warning_peoples,warning_cars,activeName,car,people,activeCarTab,allcar,allpeople,allpeople_zb,chartData1,chartData2 } = { ...toRefs(data) }

</script>